import React from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      mydata: [],
    };
  }
  componentWillReceiveProps(nextProps) {
    // 初始化
    let newdata = [];
    let myChart = echarts.init(document.getElementById('main'));
    nextProps.data.thetype.forEach((item, index) => {
      let objdata = [];
      objdata.push(nextProps.data.ydata.ydata1[index]);
      let newobjec = {
        name: item,
        type: 'bar',
        data: objdata,
      };
      newdata.push(newobjec);
      // console.log(objdata);
    });
    // console.log(newdata);
    this.setState(
      {
        mydata: newdata,
      },
      () => {
        // console.log('我重新绘制了');
        myChart.setOption(
          {
            title: {
              text: '拼多多商城商品库存一览表',
              textStyle: {
                color: '#b867f4',
              },
            },
            tooltip: {
              trigger: 'axis',
            },
            legend: {
              data: nextProps.data.thetype,
              textStyle: {
                color: 'white',
              },
            },
            toolbox: {
              show: true,
              feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: {
                  show: true,
                  type: 'jpg',
                },
              },
            },
            xAxis: [
              {
                type: 'category',
                data: nextProps.data.xdata,
                axisLine: {
                  lineStyle: {
                    color: 'white',
                    width: '50px',
                  },
                },
              },
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: 'white',
                  },
                },
              },
            ],
            series: this.state.mydata,
          },
          true
        );
      }
    );

    // 绘制图表
  }
  render() {
    return <div id="main" style={{ width: '100%', height: 500 }}></div>;
  }
}

export default Test;
